let product=(function(){
	//先求大图片的高宽
	let leftbox=document.querySelector(".leftbox");//左侧盒子
	let mark=document.querySelector(".mark");//遮罩
	let rightbox=document.querySelector(".rightbox");//右侧盒子
	let bigimg=document.querySelector(".bigimg");//大图片
	
	//左侧盒子的高度和宽度
	let leftw=leftbox.offsetWidth;
	let lefth=leftbox.offsetHeight;
	
	function getwh(ele,attr){
		//用[] 比 点更加严谨，尤其是封装方法，获取对象属性获取用[]
		//通过 parseFloat() 去掉单位
		return parseFloat(window.getComputedStyle(ele)[attr]);
	}
	
	//遮罩的高度和宽度
	//隐藏的元素通过offsetWidth/offsetHeight 求不出高度和宽度来，值为0
	//隐藏的元素通过 getComputedStyle来求高度和宽度，但是带单位
	let markw=getwh(mark,"width");
	let markh=getwh(mark,"height");
	
	//右侧盒子的高度和宽度
	let rightw=getwh(rightbox,"width");
	let righth=getwh(rightbox,"height");
	
	//大图片的高度和宽度
	bigimg.style.width=leftw*rightw/markw+"px";
	bigimg.style.height=lefth*righth/markh+"px";
	
	//鼠标移入到左侧小盒子
    leftbox.onmouseenter=function(e){
		mark.style.display="block";
		rightbox.style.display="block";
		computed(e);
	}
	
	//鼠标移入到左侧小盒子 移动--求坐标
	//offsetX,offsetY 相对目标元素
	leftbox.onmousemove=computed;
	
	function computed(e){
		//console.log(e.target);//目标元素随时会变
		let px=e.pageX;
		let py=e.pageY;
		
		let l=leftbox.offsetLeft;
		let t=leftbox.offsetTop;
		
		//最大能移动的高度和宽度
		let maxw=leftw-markw;
		let maxh=lefth-markh;
		
	    let resultX=px-l-markw/2;
		let resultY=py-t-markh/2;
		
		//设置 最大和最小移动范围
		resultX=resultX>maxw?maxw:(resultX<=0?0:resultX);
		resultY=resultY>maxh?maxh:(resultY<=0?0:resultY);
		
		mark.style.left=resultX+"px";
		mark.style.top=resultY+"px";
		
		bigimg.style.left="-"+(rightw/markw*resultX)+"px";
		bigimg.style.top="-"+(righth/markh*resultY)+"px";
	}

	//鼠标移出左侧小盒子
	leftbox.onmouseleave=function(){
		mark.style.display="none";
		rightbox.style.display="none";
	}
})()